<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <style>
            div{
                width:100px;height:100px;
                background-color:pink;
                float:left;
                margin:5px;
            }
            @media all and (min-width:1px) and (max-width:450px){
                h2{zoom:0.5;}
                div{ background-color:deeppink; }
            }
            @media all and (min-width:451px) and (max-width:650px){
                h2{color:red;}
                div{ background-color:gold;}
            }
            @media all and (min-width:651px) and (max-width:800px){
                div{ background-color:greenyellow;}
            }
            @media all and (min-width:801px) and (max-width:1024px){
                div{ background-color:orangered;}
            }
        </style>
    </head>
    <body>
        <h2>CSS样式实例:媒体查询</h2>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    <form action='' method='POST' enctype='multipart/form-data'>
        <input type='color' min=0 max=70 step=0.01 name='xxoo' value='' />
        <input type='submit' value='提交' />
    </form>    
       
    </body>
</html>